<template>
  <div class="column-list" :class="$attrs.class" :style="$attrs.style">
    <div class="column-list-wrap">
      <div v-if="showTitle === true" class="column-list-title">
        <div class="columns-list-row">
          <div v-if="showIndex === true" class="column-list-col" style="width: 46px; text-align: center">
            <div class="column-list-item" title="序号">序号</div>
          </div>
          <div v-for="(item, index) of columns" :key="item.key || index" :style="item.style" class="column-list-col">
            <slot
              :name="'title:' + item.key"
              :scope="item"
              :text="item.title"
              :index="index"
              className="column-list-item"
            >
              <div class="column-list-item" :title="item.title">{{ item.title }}</div>
            </slot>
          </div>
        </div>
      </div>
      <div v-if="dataList && dataList.length" class="column-list-body">
        <div
          v-for="(scope, index) of dataList"
          :key="index"
          :class="{ 'column-list-row-clickable': clickable, 'column-list-row-striped': index % 2 === 1 }"
          class="columns-list-row"
          @click.stop.prevent="onClick(scope)"
        >
          <div v-if="showIndex === true" class="column-list-col" style="width: 46px; text-align: center">
            <div class="column-list-item" :title="index + 1">{{ index + 1 }}</div>
          </div>
          <div
            v-for="(item, inx) of columns"
            :key="inx"
            :style="item.style"
            class="column-list-col"
            v-bind="item.on || {}"
          >
            <slot
              :name="item.key"
              :scope="scope"
              :text="getText(item, scope)"
              :item="item"
              :index="index"
              className="column-list-item"
            >
              <div class="column-list-item" :title="getText(item, scope)">{{ getText(item, scope) }}</div>
            </slot>
          </div>
        </div>
      </div>
      <div v-else class="column-list-empty">
        <a-empty :image="simpleImg" />
      </div>
    </div>
  </div>
</template>

<script>
import { get } from 'lodash-es';
import Empty from 'ant-design-vue/es/empty/index.js';

export default {
  name: 'column-list',
  inheritAttrs: false,
  props: {
    columns: { type: Array, default: () => [] },
    showTitle: { type: Boolean, default: true },
    showIndex: { type: Boolean, default: true },
    gutter: { type: [Number, String], default: '0.5em' },
    dataList: { type: Array, default: () => [] },
    emptyText: { type: String, default: '-' },
  },
  data() {
    return {
      simpleImg: Empty.PRESENTED_IMAGE_SIMPLE,
    };
  },
  computed: {
    clickable() {
      return typeof this.$attrs.onClick === 'function';
    },
    space() {
      if (typeof this.gutter === 'number') {
        return this.gutter + 'px';
      }
      return this.gutter;
    },
  },
  methods: {
    getText(col, data) {
      let val = get(data, get(col, 'key'));
      let format = get(col, 'format');
      if (typeof format === 'function') {
        val = format(val, data, col);
      }
      return val || this.emptyText;
    },
    onClick(scope) {
      if (!this.clickable) return;
      this.$attrs.onClick(scope);
    },
  },
};
</script>

<style lang="less">
.column-list {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .column-list-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .column-list-title {
      flex: none;
      width: 100%;
      box-sizing: border-box;
      background: #e8e8e8;
      .columns-list-row {
        padding: 0.5em 0;
      }
    }
    .column-list-body {
      flex: auto;
      height: auto;
      min-height: 0;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden auto;
    }
    .columns-list-row {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
      padding: 0.2em 0;
      .column-list-col {
        flex: none;
        width: auto;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 v-bind(space);
        .column-list-item {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          box-sizing: border-box;
        }
      }
      &.column-list-row-clickable,
      &.column-list-row-clickable.column-list-row-striped {
        cursor: pointer;
        &:hover {
          background: rgba(24, 144, 255, 0.1);
        }
      }
    }
    .column-list-empty {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
  }
}
</style>
